<template>
  <div>
    <div class="PortalSitesMap_layerSwitch__dolBg" v-if="isShowType">
      <div>
        选择底图
        <span
          role="img"
          aria-label="close"
          tabindex="-1"
          class="anticon anticon-close"
        ></span>
      </div>
      <div
        class="ant-divider css-1wismvm ant-divider-horizontal"
        role="separator"
      ></div>
      <div class="PortalSitesMap_layer__HgOPW">
        <div
          v-for="(item, index) in props.mapList"
          :key="index"
          class="PortalSitesMap_layerItem__bIseP"
          @click="changeMapTemplate(item)"
        >
          <span>
            <img
              :src="item.icon"
              :class="item.id === actived ? 'activeClass' : ''"
            />
          </span>
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div>
        地名
        <label
          class="ant-checkbox-wrapper ant-checkbox-wrapper-checked css-1wismvm"
        >
          <span class="ant-checkbox css-1wismvm ant-checkbox-checked">
            <!-- :disabled="actived==='00000001'" -->
            <input
              type="checkbox"
              class="ant-checkbox-input"
              v-model="isTerrName"
              v-on:change="changeTerrName()"
            />
            <span class="ant-checkbox-inner"></span>
          </span>
        </label>
      </div>
    </div>
    <div class="BtnBox">
      <el-tooltip content="图层管理" placement="top">
        <img
          :src="isShowType ? layers_s : layers"
          style="width: 60px; height: 60px"
          alt=""
          @click="changeLayer"
        />
      </el-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import layers_s from '@/assets/resource/layers_s.jpg'
import layers from '@/assets/resource/layers.jpg'
import { ref, reactive, onMounted } from 'vue'
import type { mapListItem } from '../PublicMap/type/type'
const $emit = defineEmits(['changeMapTemplate'])

const props = defineProps({
  mapList: {
    type: Array as () => mapListItem[],
    default: () => {
      return []
    },
  },
})
let actived = ref<string>('00000001')
//控制是否显示地名
let isTerrName = ref<boolean>(true)
//控制是否显示切换地图模板
let isShowType = ref<boolean>(false)
//保存选择的地图模板与之对应的注记图层ID
// let layerCaId = ref<string>('')
let paramsObj = reactive<any>({
  isTerrName: '', //控制是否显示地名
  layerId: '', //图层ID
  layerCaId: '', //注记图层id
  // isShowType: "", //控制是否显示切换地图模板
})
onMounted(() => {
  //展示切换地图模板时默认显示地形模板和地形注记
  paramsObj.layerId = 'tdt_terr'
  paramsObj.layerCaId = 'tdt_ctatest'
})

//展示地图切换组件
const changeLayer = () => {
  isShowType.value = !isShowType.value
}
//点击切换地图显示
const changeMapTemplate = (params: any) => {
  // this.isTerrName = !this.isTerrName
  actived.value = params.id
  paramsObj.isTerrName = isTerrName.value
  paramsObj.layerId = params.layerId
  if (paramsObj.layerId == 'tdt_terr') {
    paramsObj.layerCaId = 'tdt_ctatest' //保存地形注记ID
    //当前地图模板是影像
  } else if (paramsObj.layerId == 'tdt_satellite') {
    paramsObj.layerCaId = 'tdt_ciatest' //保存影像注记ID
  } else {
    paramsObj.layerCaId = 'tdt_cvatest' //保存矢量注记ID
  }

  $emit('changeMapTemplate', paramsObj)
}
//切换是否显示地名图标
const changeTerrName = () => {
  console.log('this.isTerrName', isTerrName)
  //当前地图模板是地形渲染
  if (paramsObj.layerId == 'tdt_terr') {
    paramsObj.layerCaId = 'tdt_ctatest' //保存地形注记ID
    //当前地图模板是影像
  } else if (paramsObj.layerId == 'tdt_satellite') {
    paramsObj.layerCaId = 'tdt_ciatest' //保存影像注记ID
  } else {
    paramsObj.layerCaId = 'tdt_cvatest' //保存矢量注记ID
  }
  paramsObj.isTerrName = isTerrName.value
  // this.isTerrName = !this.isTerrName
  $emit('changeMapTemplate', paramsObj)
}
</script>

<style lang="scss" scoped>
/* **************地图地图切换功能 ******************* */
.BtnBox {
  // width: 100%;
  // height: 100%;
  position: absolute;
  // left: 9.5vw;
  // right: 2vw;
  // bottom: 20px;
  z-index: 11111;
  right: -4px;
  top: 60px;
}

.PortalSitesMap_layerSwitch__dolBg {
  background: #fff;
  padding: 0.5vw;
  pointer-events: none;
  pointer-events: visiblePainted;
  pointer-events: auto;
  position: absolute;
  // left: 9.5vw;
  right: 3vw;
  top: 20px;
  z-index: 11111;
}

.activeClass {
  border: 2px solid #4185d0;
  // box-shadow: 0px 0px 9px 3px #4185d0 outset !important;
}

.PortalSitesMap_layerItem__bIseP {
  padding: 5px;
}

.PortalSitesMap_layer__HgOPW {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

:where(.css-1wismvm).ant-layout,
:where(.css-1wismvm).ant-layout * {
  box-sizing: border-box;
}
</style>
